<template>
  <div style="padding: 30px">
    <h2>用户管理</h2>
    <el-row class="h">
      <el-button round id="userButton" size="mediu" type="primary" @click="fn"
        >添加用户</el-button
      >
    </el-row>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formInline.user" placeholder="账号或姓名"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="formInline.region" placeholder="器材库管">
          <el-option label="全部" value="shanghai"></el-option>
          <el-option label="系统管理员" value="beijing"></el-option>
          <el-option label="维修部主管" value="beijing"></el-option>
          <el-option label="器材库管" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.state" placeholder="全部">
          <el-option label="启用" value="shanghai"></el-option>
          <el-option label="禁用" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-row>

        <el-button  type="primary" icon="el-icon-zoom-in" size="mediu" >搜索</el-button>
                <el-button type="info" icon="el-icon-refresh-right" size="mediu"
          >重置</el-button
        >
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="account" label="账号"> </el-table-column>
      <el-table-column prop="userName" label="姓名"> </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号"> </el-table-column>
      <el-table-column prop="roleName" label="角色"> </el-table-column>
      <el-table-column prop="addTime" label="添加时间"> </el-table-column>
      <el-table-column prop="enable" label="启用/禁用">
        <template template scope="scope">
          <el-switch
            v-model="scope.row.value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作">
        <i class="el-icon-edit" style="margin-right: 20px"></i>
        <el-button type="text" @click="open"
          ><i class="el-icon-delete"></i
        ></el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <span class="demonstration">直接前往</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
#h {
  margin-bottom: 15px;
  font-weight: 200;
}
</style>
<style >
#yuan {
  background: #6554c0;
  color: black;
}
</style>
</el-form>
<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
        state: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          phoneNumber: "上海市普陀区金沙江路 1518 弄",
          addRole: "dsfd",
          addTime: "df",
          enable: "fds",
          operation: "dfd",
          value: true,
        },
      ],
      currentPage3: 5,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    fn: function () {
      this.$router.push("/home/tjyh");
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getData: function () {
      this.$axios({
        url: "/user",
        methods: "get",
        params: {
          page: 1,
          limit: 5,
        },
      }).then((res) => {
        /*  console.log(res.data); */
        if (res.data.code == 0) {
          this.tableData = res.data.data;
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>